//作品滚动
(function () {
    let oContainer = document.querySelector('.carousel')
    let oImgBox = oContainer.querySelector('.imgs')
    let oPrev = oContainer.querySelector('.prev')
    let oNext = oContainer.querySelector('.next')
    let aImgs = oContainer.querySelectorAll('.imgs-wrap')
    let moveTime = aImgs.length - 3 //能翻页的次数
    let currTime = 0

    oPrev.onclick = oNext.onclick = function(){
        if(this == oPrev){
            if(currTime > 0){
                currTime--
                changImg()
                
            }
        }else{
            if(currTime < moveTime){
                currTime++
                changImg()
            }
        }
        // console.log(currTime);
        if(currTime <= 0 ){
            oPrev.classList.add('invalid')
        }else{
            oPrev.classList.remove('invalid')
        }
        if(currTime == moveTime){
            oNext.classList.add('invalid')
        }else{
            oNext.classList.remove('invalid')
        }
    }
    function changImg(){
        oImgBox.style.left = -((aImgs[5].offsetWidth + 30) * currTime )+ 'px'
    }
    let timer
    function go(){
        timer = setInterval(()=>{
            if(currTime == moveTime){
                currTime = -1
            }
            oNext.onclick()
        },2000)
    }
    go()
    oContainer.addEventListener('mouseover',()=>{
        clearInterval(timer)
    })
    oContainer.addEventListener('mouseout',()=>{
        go()
    })
})();

(function () {
    let up = document.querySelector('.up')
    let html = document.documentElement
    up.addEventListener('click', function () {
        html.scrollTo({
          top: 0,
          behavior: "smooth"
        })
      }, false)


      let articleWrap = document.querySelector('#blog .article-wrap')
      let url = 'http://81.70.162.221:3000/getBlogs'
      axios.get(url, {
        params: {
            pageNum: 1,
            pageSize: 6
          }
      }).then(response => {
        let blogs = response.data.data
        console.log(blogs);
        blogs.forEach(blog =>{
          // console.log(blog.id);
          articleWrap.insertAdjacentHTML('beforeend',`
          <article>
            <a href="blog-single.html?id=${blog.id}"><img src="http://81.70.162.221:3000/${blog.image}" alt=""></a>
            <div class="content-wrap">
              <a href="blog-single.html?id=${blog.id}">
                <h3>${blog.title}</h3>
              </a>
              <p>${blog.abstract}</p>
              <div class="flex justify-content-between align-items-center time">
                <span class="date"><i class="iconfont qm-clock"></i>${blog.createTime}</span>
                <a class="more" href="blog-single.html?id=${blog.id}">查看更多<i class="iconfont qm-arrow-right"></i></a>
              </div>
            </div>
          </article>
          `)
        })
      })
})();
const up = document.querySelector('.up');
const html = document.documentElement
document.addEventListener('scroll', function() {
    up.hidden = !(html.scrollTop > html.clientHeight)
},false);
up.addEventListener('click', function() {
    html.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
},false)